<template>
  <div>
    <el-dialog
      :title="name"
      :visible.sync="showDialog1"
      :before-close="handleClose"
      width="30%"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item v-if="edit === '0'" label="账户名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item v-if="edit === '0'" label="联系方式" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item v-if="edit === '0'" label="充值金额" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <!-- <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="备注" prop="desc">
            <!-- <el-input v-model="noteArea" type="textarea" /> -->
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    edit: {
      type: String,
      required: true
    },
    note: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      noteArea: '',
      showDialog1: true,
      ruleForm: {
        name: '',
        region: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入账户名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        desc: [{ required: true, message: '请填写', trigger: 'blur' }]
      }
    };
  },
  mounted() {
    this.noteArea = this.note;
  },
  methods: {
    closeDialog() {
      this.$emit('close', this.noteArea);
    },
    submit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.$emit('close', this.noteArea);
        } else {
          return false;
        }
      });
    },
    handleClose(done) {
      this.$emit('close', this.noteArea);
    }
  }
};
</script>
<style lang="scss" scoped>
.tip {
  border-top: 1px solid #ddd;
  margin-top: 10px;
  padding-top: 20px;
  .flex {
    display: flex;
    margin-top: 10px;
    .item {
      display: flex;
      flex-direction: column;
      margin-right: 10px;
      .el-button {
        width: 48px;
        box-sizing: content-box;
      }
    }
  }
}
.el-tabs--card {
  >>> .el-tabs__content {
    overflow: inherit;
    .chooseBtn {
      position: absolute;
      right: 10px;
      top: -53px;
    }
  }
}
.el-table {
  margin-bottom: 10px;
}
.el-pagination {
  position: static;
  padding: 0;
}
</style>
